<template>
    <div ref="videoContainer" class="video-container">
        <video ref="videoPlayer" class="video-js vjs-default-skin" controls preload="auto"></video>
    </div>
</template>

<script>
    import videojs from 'video.js';
    import 'video.js/dist/video-js.css';

    export default {
        name: 'VideoPlayer',
        props: {
            src: {
                type: String,
                required: true
            }
        },
        data() {
            return {
                player: null
            };
        },
        mounted() {
            this.initializePlayer();
        },
        beforeUnmount() {
            if (this.player) {
                this.player.dispose();
            }
        },
        methods: {
            initializePlayer() {
                this.player = videojs(this.$refs.videoPlayer, {
                    autoplay: false,
                    controls: true,
                    sources: [{
                        src: this.src,
                        type: 'application/x-mpegURL' // HLS流
                    }]
                });
            }
        },
        watch: {
            // 监听src变化，更新播放器源
            src(newSrc) {
                if (this.player) {
                    this.player.src({
                        src: newSrc,
                        type: 'application/x-mpegURL'
                    });
                }
            }
        }
    }
</script>

<style scoped>
    .video-container {
        width: 100%;
        max-width: 800px;
        margin: 0 auto;
    }
</style>
